﻿<div class="ui-layout-center">
    <div style="height: 500px; width: 800px" id="canvasContainer">
    </div>
</div>
<div class="ui-layout-east" style="background: #F4F4F4">
    <h3 class="shortInfoHeader">Owner
    </h3>
    <ul class="circleItems selectable">
        <li>People1</li>
        <li>People2</li>
        <li>People3</li>
    </ul>
    <h3 class="shortInfoHeader">Name
    </h3>
    default
    <h3 class="shortInfoHeader">Modified date
    </h3>
    @DateTime.Now.ToShortDateString()
    <h3 class="shortInfoHeader">Modified by
    </h3>
    Hero
</div>
<div class="ui-layout-south" style="background: #F4F4F4">
    <div style="left: 0px; top: 5px; position: absolute" class="graphAction">
        <span class="flatStyle">
            <span class="ui-icon ui-icon-circle-arrow-w ">Left</span>
        </span>
        <span class="flatStyle">
            <span class="ui-icon ui-icon-circle-arrow-e">Right</span>
        </span>
        <span class="flatStyle">
            <span class="ui-icon ui-icon-circle-arrow-n">Up</span>
        </span>
        <span class="flatStyle">
            <span class="ui-icon ui-icon-circle-arrow-s">Down</span>
        </span>
        <span class="flatStyle">
            <span class="ui-icon ui-icon-circle-zoomin">ZoomIn</span>
        </span>
        <span class="flatStyle">
            <span class="ui-icon ui-icon-circle-zoomout">ZoomIn</span>
        </span>
        @*<div class="zoomSlider">
        </div>*@
    </div>
    <span style="float: right;">
        <span class="flatStyle toggleShowHide" style="padding: 4px; border: 1px solid #CCC">
            <span class="ui-icon ui-icon-info"></span>
        </span>
        @*<input type="button" value="Show/Hide" class="toggleShowHide" />*@
    </span>
</div>
